<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>兆千图</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/news.css">
    <style>
        html,
        body {
            background: #FF0078;
        }
        

        

        /* 邀请 */
        .list-wrap {
            padding: 10px;
        }

        .nav-ul {
            padding: 0 15px;
        }

        .nav-ul .list {
            border-radius: 10px 10px 0 0;
            background: #fc44b7;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            box-sizing: border-box;
            width: 30%;
            word-break: break-all;
        }

        .nav-ul .list.active {
            color: #fc44b7;
            background: #fff;
        }

        .ul-wrap {
            background: #fff;
            border-radius: 10px;
            padding: 10px;
        }

        /* 收益 */
        .ul-wrap .list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #eee;
            padding: 10px 0;
        }

        .ul-wrap .list:last-child {
            border: none;
        }

        .sy-wrap .time {
            color: #757575;
            font-size: 12px;
        }

        .sy-wrap .price {
            color: orange;
            font-size: 18px;
        }

        .sy-wrap .tip {
            text-align: center;
            padding: 30px 0;
        }

        .warn {
            color: #fc44b7;
        }

        /*  */
        .yao-wrap .title {
            border-bottom: 1px solid #fc44b7;
            padding-bottom: 10px;
        }

        .yao-wrap .title h3 {
            font-weight: normal;
            color: #fc44b7;
        }


       


        .yao-wrap .time {
            font-size: 14px;
            color: #757575;
        }

        .tx {
            border-radius: 50%;
        }


       
        .btns {
            border-radius: 15px;
            padding: 5px 3px;
            border: 1px solid #ddd;
            color: #757575;
        }


        .top-div{
            width: 100vw;
            min-height: 150vw;
            border-image-slice: 0% 0 0% fill;
            border-image-source: url(../../image/member/bg5.png);
            
            position: relative;
            text-align: center;
        }
        .middle-div{
            /* width: 100vw; */
            min-height: 150vw;
            border-image-slice: 0% 0 0% fill;
            border-image-source: url(../../image/member/bg2.png);
            position: relative;
            text-align: center;
        }
        .bottom-div{
            /* width: 100vw; */
            min-height: 150vw;
            border-image-slice: 0% 0 0% fill;
            /* border-image-source: url(../../image/member/bg3.png); */
            position: relative;
            text-align: center;
        }
        .head{
            padding-top: 50%;
            /* padding-left: 20%; */
            width: 100%;
            /* text-align: center; */

        }
         .left{
            font-size: 2.8rem;
            color: #F345AE;
            margin-top: 7%;
        }
        .right{
            font-size: 2.8rem;
            margin-left: 10%;
            color: #F345AE;
        } 
        .zhong{
            margin-top: 35%;
            font-size: 2rem;
           
        }
        .di{font-size: 30px;margin-top: 10%;}
        .copy-btn{margin-left: 10%;color:#FE0579; font-size: 1.5rem;background-color: #fff;padding: 5px 15px;border-radius: 20px;}
        .you{position: absolute;right: 1%;top: 29.8%;width: 20px;font-size: 14px;}
        table{width: 90%;text-align: center;}
        td, th {
            border: 1px solid #FDDF9F;
            height: 30px;
        }
        .middle-zhong{margin-left: 10%;
            margin-top: 20%;
        }
        .middle-di{text-align: left;}
        .code{color: #52AAFB;margin-top: 1%;}
        .middle-left,.middle-right{color:#F345AE;font-size: 2.5rem;margin-top: 14%;}
        .middle-left{margin-right: 27%;text-align: left;}
        .middle-di{width: 90%;margin-left: 5%;}
        .bottom-left,.bottom-right{margin-top: 23%;color: #F345AE;font-size: 20px;}
        .bottom-left{text-align: left;margin-right: 32%;}
        .bottom-right{float: right;margin-right: 5%;}
        .red_cla{color: red;}
    </style>
</head>

<body>
    <div id="view" v-cloak style="width: 95%;">
      <div class="top-div">
          <div class="head"> 
              <span class="left">30%</span>
              <span class="right">20%</span>
          </div>
          <div class="zhong"  onclick="openShare()">
              <span style="color: #FE0579;"></span>
          </div>
          <div class="di">
              <span class="code">{{ffInfo.send_code}}</span>
              <span class="copy-btn" onclick="copyTxt(view.ffInfo.send_code)" > 复制</span>
          </div>
          <div class="you">
            <span style="color:#333;" onclick="_url({url:'about', id: 14, title:'活动规则'})">活动规则</span>
          </div>
      </div>
      <div class="middle-div" style="margin-left: 3%;">
        <div class="middle-head"> 
            <span class="middle-left">{{fencheng_topup}}%</span>
            <span class="middle-right">20%</span>
        </div>
        <div class="middle-zhong">
            <table cellspacing="0" >
                <tr >
                    <th >等级</th>
                    <th>邀请人数</th>
                    <th>收益奖励</th>
                </tr>
                <tr v-for="(m, index) in tabList">
                    <th :class="{'red_cla':m.class_num==1}">{{m.id}}</th>
                    <th :class="{'red_cla':m.class_num==1}">{{m.num}}</th>
                    <th :class="{'red_cla':m.class_num==1}">{{m.proportion}}</th>
                </tr>
                <!-- <tr>
                    <th :class="{'red_cla':class_num==2}">2</th>
                    <th :class="{'red_cla':class_num==2}">4~10</th>
                    <th :class="{'red_cla':class_num==2}">15%</th>
                </tr>
                <tr>
                    <th :class="{'red_cla':class_num==3}">3</th>
                    <th :class="{'red_cla':class_num==3}">11~20</th>
                    <th :class="{'red_cla':class_num==3}">20%</th>
                </tr>
                <tr>
                    <th :class="{'red_cla':class_num==4}">4</th>
                    <th :class="{'red_cla':class_num==4}">21~30</th>
                    <th :class="{'red_cla':class_num==4}">25%</th>
                </tr>
                <tr>
                    <th :class="{'red_cla':class_num==5}">5</th>
                    <th :class="{'red_cla':class_num==5}">31~50</th>
                    <th :class="{'red_cla':class_num==5}">30%</th>
                </tr> -->
            </table>
        </div>
        <div class="middle-di">
            <p style="font-weight: bold;margin-top: 5%;margin-bottom: 2%;">奖励说明</p>
            <p style="font-size: 15px;">* 好友充值固定获得20%的奖励，好友充值100元，你得20元。</p>
            <p style="font-size: 15px;">*根据累计邀请认证嘉宾的女性人数不同收益比例有所不同，好友未认证成为女性嘉宾的,无法从好友身上获取奖励，也不计算邀请认证人数。</p>
        </div>
      </div>

      <div class="bottom-div" style="margin-left: 3%;">
        <h1 style="color: #fff;">我的邀请</h1>
        <div class="list-wrap">
           
            <div class="ul-wrap">
               
                <div class="yao-wrap" v-if="aIndex==1">
                    <div class="title flex" >今日邀请人数<h3 style="margin-right: 10%;">{{day_num}}人</h3>&nbsp;&nbsp;&nbsp;总邀请人数<h3>{{total_count}}人</h3> </div>
                   
                    <ul class="yao-ul">
                        <li class="list" v-for="(m, index) in yaoList" >
                            <div style="width: 72%;font-size: 14px;">
                                <div style="display: inline-block;text-align: left;width: 50px;" >
                                    <img class="tx" style="display: inline-block;text-align: left;" :src="returnImg(m.avatar)" onerror="this.src='../../image/touxiang.png'" alt="">
                                </div>
                              
                                <div style="display: inline-block;text-align: left;">
                                    id：{{m.id}} <button class="btns" @click="copyId(m.id)">{{_i18n('复制')}}</button>
                                    <br />
                                    昵称：{{m.name}}
                                    <br />
                                    <span v-if="m.topup" style="color: orange;">已充值</span>
                                </div>
                               
                            </div>
                            <p class="time" style="font-size: 14px;width: 28%;">{{m.register_datetime}}</p>
                        </li>
                    </ul>
                </div>
                <div class="rw-wrap" v-if="aIndex==2">
                    <ul class="rw-ul">
                        <li class="list" v-for="(m, index) in rwList">
                            <div class="left flex">
                                <div class="l">
                                    <i v-if="index<3" class="base-icon " :class="'icon'+(index+1)"></i>
                                    <span class="num" v-else>{{index+1}}</span>
                                </div>
                                <img :src="returnImg(m.avatar)" onerror="this.src='../../image/touxiang.png'" class="tx" alt="">
                            </div>
                            <span class="price">{{_i18n('共奖励')}}{{m.money}}</span>
                        </li>
                       
                    </ul>
                </div>
            </div>
        </div>
      </div>
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/vue.js"></script>
<script>
    var view = new Vue({
        el: '#view',
        data: {
            imgurl: imgurl,
            ffList: [],
            ffInfo: {},
            ios: 1, // 1上架 0非上架

            shareTxt: '',
            aIndex: 1,
            dataObj: {
                0: { // 收益
                    page: 1,
                    bottom: 0,
                },
                1: { // 邀请
                    page: 1,
                    bottom: 0,
                },
                2: { // 奖励
                    page: 1,
                    bottom: 0,
                },
            },
            // class_num : 1,
            invite_count : 0,
            yqm : '',
            day_num : 0,
            total_count : 0,
            fencheng_topup : 0,
            subordinate_fencheng : 0,
            fix_fencheng1 : 0,
            fix_fencheng2 : 0,
            syList: [], // 收益
            yaoList: [], // 邀请
            rwList: [], // 奖励
            tabList: [], // 奖励

        },
        methods: {
            // 跳转
            _url(param, url) {
                _url(param, url);
            },
            // 返回图片路径
            returnImg(url) {
                return returnImg(url);
            },
            copyId(id){
                console.log(id)
                copyTxtId(id)
            }
            
        }
    })
    apiready = function() {
        getPageContent(7, function(data) {
            view.shareTxt = data.body;
        })
        _getUser(function(ret) {
            view.ffInfo = ret.result;
            view.invite_count = ret.result.invite_count
            view.yqm = ret.result.yqm;
            // if(view.ffInfo.invite_count > 4 && view.ffInfo.invite_count <= 10){
            //     view.class_num = 2;
            // }else if(view.ffInfo.invite_count > 10 && view.ffInfo.invite_count <= 20){
            //     view.class_num = 3;
            // }else if(view.ffInfo.invite_count > 20 && view.ffInfo.invite_count <= 30){
            //     view.class_num = 4;
            // }else if(view.ffInfo.invite_count > 30 && view.ffInfo.invite_count <= 50){
            //     view.class_num = 5;
            // }else if(view.ffInfo.invite_count > 50){
            //     view.class_num = 6;
            // }
        })
        console.log('view.yqm' )
        console.log(view.yqm )
        
        getYqNum(view.yqm);
       
        //getSY()
        tabList()
        getYao()
        //getRW();
        _scrollToBottom(function() {
            if (view.dataObj[view.aIndex].bottom == 0) {
                getData();
            }
        })
    }
    function getYqNum(yqm) {
        _ajax('api/member/getYqNum', function(ret, err) {
            if (ret && ret.code == 200) {
                view.day_num = ret.data.day_count
                view.total_count = ret.data.total_count
                view.fencheng_topup = ret.data.fencheng_topup
                view.fix_fencheng1 =ret.data.fix_fencheng1
                view.fix_fencheng2 =ret.data.fix_fencheng2
                view.subordinate_fencheng =ret.data.subordinate_fencheng
            }
        }, {
            user_id: $api.getStorage('userid'),
            yqm: view.yqm
        })
    }


    function getData() {
        view.dataObj[view.aIndex].page++;
        switch (view.aIndex) {
            case 1:
                getYao()
                break;
            case 2:
                getRW();
                break;
            default:
                getSY()
                break;
        }
    }

    function tabList(){
        _ajax('api/member/getTabList', function(ret, err) {
            if (ret && ret.code == 200) {
                if (ret.data.length > 0) {
                    view.tabList = view.tabList.concat(ret.data);
                }
            }
        }, {
            user_id: $api.getStorage('userid'),
            page: view.dataObj[0].page
        })
    }

    // 收益明细
    function getSY() {
        _ajax('api/member/income', function(ret, err) {
            if (ret && ret.code == 200) {
                if (ret.data.length > 0) {
                    view.syList = view.syList.concat(ret.data);
                } else {
                    view.dataObj[0].bottom = 1;
                }
            }
        }, {
            user_id: $api.getStorage('userid'),
            page: view.dataObj[0].page
        })
    }
    // 邀请列表
    function getYao() {
        _ajax('api/Member/team', function(ret, err) {
            if (ret && ret.code == 200) {
                if (ret.data.length > 0) {
                    view.yaoList = view.yaoList.concat(ret.data);
                } else {
                    view.dataObj[1].bottom = 1;
                }
            }
        }, {
            id: $api.getStorage('userid'),
            level: 1,
            page: view.dataObj[1].page
        })
    }
    // 奖励排行榜
    function getRW() {
        _ajax('api/member/rewardRanking', function(ret, err) {
            if (ret && ret.code == 200) {
                view.dataObj[2].bottom = 1;
                if (ret.data.length > 0) {
                    view.rwList = view.rwList.concat(ret.data);
                } else {
                    view.dataObj[2].bottom = 1;
                }
            }

        }, {
            page: view.dataObj[2].page
        })
    }

    function openShare() {
        // return _alert('敬请期待', function(ret){
            
        // });
        // showDetail('frame0/share')
        // return;
        var buttons = ['海报', '链接'];
        _action('', buttons, function(bIndex) {
            if (bIndex != buttons.length + 1) {
                if (bIndex == 1) {
                    _url({
                        url: 'frame4/ewm',
                        title: '海报'
                    })
                } else {
                    showDetail('frame0/share')
                }
            }
        })

    }
</script>

</html>